div.namelist-input-editor {
    div.namelist-input-group {

        &.namelist-input-group-highlight {
            div.namelist-input-group-header {
                background-color: #ffeb3b7d;
            }
        }

        div.namelist-input-group-header {

            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 3px;
            margin-bottom: 3px;
            align-items: center;

            h5 {
                margin-top: 0;
                margin-bottom: 0;
                margin-left: 5px;
                margin-right: 0;
            }

            button {
                outline: none !important;
                box-shadow: none;
                width: 30px;
            };

            button:hover {
                border-color: #e1e1e1;
            }

            div.namelist-input-group-header-switch {

                display: flex;
                align-items: center;
                margin-left: 4px;
                margin-right: 4px;

                & > span {
                    font-size: small;
                    margin-left: 2px;
                    margin-right: 2px;
                }
            }

            span.badge.badge-pill.namelist-input-set-variable-count {
                color: #212529;
                background-color: #89ff007a;
                font-size: 65%;
                margin-left: 1rem;
            }

            a.namelist-input-variables-user-guide-link {
                i {
                    color: #2196f3bd;
                }
                margin-left: 1rem;
            }
        }

        div.namelist-input-variables {

            div.namelist-input-variable {

                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap !important;
                margin-top: -1px;

                button.btn.btn-namelist-input-erase {
                    border: none;

                    &:focus {
                        box-shadow: none;
                    }
                }

                div.namelist-input-variable-name {
                    width: 200px;
                    border-radius: 0;
                    flex-grow: 0 !important;
                    flex-shrink: 0 !important;

                    padding: .25rem .5rem;
                    font-size: .875rem;
                    line-height: 1.5;
                    color: #495057;
                    background-color: #e9ecef;
                    border: 1px solid #ced4da;
                }

                div.namelist-input-variable-value {
                    width: 200px;
                    flex-grow: 0 !important;
                    flex-shrink: 0 !important;

                    border-top: 1px solid #ced4da;
                    border-bottom: 1px solid #ced4da;
                    border-right: 1px solid #ced4da;
                    border-left: none;

                    input.form-control, select.form-control {
                        border-radius: 0;
                        border: none;
                    }

                    input.form-control:invalid, select.form-control:invalid {
                        background-color: #ff8080;
                    }

                    input.form-control:focus, select.form-control:focus {
                        box-shadow: none;
                    }

                    div.input-group.namelist-input-datetime-picker {

                        div.input-group-text {
                            border-radius: 0;
                            border-top: none;
                            border-bottom: none;
                            border-right: none;
                        }
                    }

                    div.namelist-input-variable-check {

                        height: 100%;
                        width: 100%;
                        background-color: #e9ecef;

                        div.form-check {
                            display: flex;
                            width: 100%;
                            height: 100%;
                            padding: 0;
                            margin: 0;                           

                            input.form-check-input {
                                position: relative;
                                margin: auto;
                                padding: 0;
                            }
                        }
                    }
                }

                div.namelist-input-variable-description {
                    font-size: .75rem;
                    align-self: center;
                    padding-left: 10px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    color: #495057;
                }

                &.namelist-input-variable-highlight {
                    background-color: #ffeb3b7d;
                }

                &:hover {
                    background-color: aliceblue;
    
                    div.namelist-input-variable-name {
                        font-weight: bold;
                    }

                    div.namelist-input-variable-value {
                        input, select {
                            font-weight: bold;
                        }
                    }

                    div.namelist-input-variable-description {
                        font-weight: bold;
                        color: #495057;
                    }
                }

                &.namelist-input-variable-unset {

                    button.btn.btn-namelist-input-erase {
                        visibility: hidden;
                    }
                    
                    div.namelist-input-variable-name {
                        font-style:italic;
                        color: #8794a1;
                        background-color: #eff2f5;
                    }

                    div.namelist-input-variable-value {
                        input, select {
                            font-style:italic;
                            color: #8794a1;
                        }
                    }

                    div.namelist-input-variable-description {
                        color: #8794a1;
                    }
                }                
            }

            &.namelist-input-hide-unset {
                div.namelist-input-variable {
                    &.namelist-input-variable-unset {
                            display: none;
                    }
                }    
            }
        }

        &.namelist-input-group-unset {
            &.namelist-input-hide-unset {
                display: none;
            }
        }
    }
}